<!DOCTYPE html/>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="stylesheets/sass/screen.css">
	<title></title>
</head>
<body>
<!-- 主页面框架 -->
	<div class="continer">
	<!-- 内容框架 -->
		<div class="content">
		<!-- 头部 -->
			<header>
				<div>
					<span>ife.baidu.com</span>
				</div>
				<div>2016.03</div>
			</header>
		<!-- banner -->
			<nav>
				<div class="img">
				<!-- 此处使用www.imooc.com/code/4540处的定位方法 其中absolute方法需要跟随才可实现如果只给div添加图片样式 不在div是空标签 则redleft的样式不会跟随在image后面 -->
					<div class="greenleft"></div>
					<img class="image" src="img/1.png"><!--
					--><div class="redleft"></div>
				</div>
					
				<div class="about">
					<h1><span><strong>A</strong>BOUT</span></h1>
					<h1><span><strong>T</strong>ECHNOLOGE</span></h1>
					<div class="line1">About technologe about technologe about technologe</div>
					<div class="seven">700</div>
					<div>
						<div class="threept">3.2</div>
						<div class="cssline2">
							<div>css</div>
							<div>csscsscsscsscss</div>
						</div>
					</div>
				</div>
			</nav>

			<section class="new">
				<div>
					<i class="what">What</i>
					<span>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前</span>
				</div>
				<div>
					<i class="when">When</i>
					<span>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前</span>
				</div>
				<div class="howcontent">
					<i class="how">How</i>
					<span>前端前端前端前端前端前端前</span>
					<span>前端前端前端前端前端前端前端前</span>
					<span>前端前端前端前端前端前</span>
					<ul>
						<li>What-----------<em> 40%</em></li>
						<li>What-----------<em> 30%</em></li>
						<li>What-----------<em> 30%</em></li>
					</ul>
				</div>
			</section>

			<section class="new2 clearfix">
				<div class="new2_left">
					<span class="font42"><i>THE</i>TECHNOLOGE OF FRONT</span>
					<div class="font33">前端技术领域</div>
					<p class="clearfix">
						<i>前</i>
						<span class="img_new2"></span>
						<span>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前</span>
						<span>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前</span>
						<span>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前</span>
					</p>
				</div>
				<div class="new2_right">
					<div class="new2_right_img">
						<img src="img/2.png"><!--
					--><div class="new2_right_img_title">
							<div class="line_green">
								<span class="line_white_title">前端技术</span>
								<span class="line_green_title">前端技术前端技术</span>
							</div>
						</div>
					</div>
					<div class="new2_right_content">
						<ul>
							<li><i></i>前端前端前端……………………………………</li>
							<li><i></i>前端前端前端……………………</li>
							<li><i></i>前端前端前端………………………………</li>
						</ul>
						<div class="new2_right_content_red">
							<div class="new2_right_content_red_div clearfix">
								<span class="new2_right_content_red_0">0</span>
								<span class="new2_right_content_red_con">
									<div class="new2_right_content_red_title">ONE TWO</div>
									<div class="new2_right_content_red_title">THREE FOUR FIVE</div>
									<div class="new2_right_content_red_title2">hello world hello world hello world</div>
								</span>
							</div>
						</div>
						<div class="new2_right_content_text">
							<em>“</em>
							<em>”</em>
							<span>world world world world world world world world world world world world world world world world</span>
						</div>
					</div>
				</div>

			</section>
			<footer>
				<div>ife.baidu.com</div>
			</footer>
		</div>
	</div>

</body>
</html>